 <template>
  <d2-container>
    <template slot="header">
      <el-form :inline="true" :model="listQuery" size="mini" style="margin-bottom: -18px;">
        <el-form-item label="" prop="username">
          业务员: <el-input
            @keyup.enter.native="handleFilter"
            style="width: 200px;"
            placeholder
            v-model="listQuery.userName"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="" prop="username">
          车牌号: <el-input
            @keyup.enter.native="handleFilter"
            style="width: 200px;"
            placeholder
            v-model="listQuery.car_no"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="default" @click="handleFilter" icon="el-icon-search">搜 索</el-button>
        </el-form-item>
      </el-form>
    </template>
    <!-- table表格 -->
    <el-table :key="tableKey" :data="list" highlight-current-row stripe style="width: 100%">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" align="center" label="序号" width="60"></el-table-column>
      <el-table-column align="center" label="业务员">
        <template slot-scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="分机号">
        <template slot-scope="scope">
          <span>{{scope.row.extensionNumber}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="车牌号">
        <template slot-scope="scope">
          <span>{{scope.row.carNo}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="拨打时间" show-overflow-tooltip width="200">
        <template slot-scope="scope">
          <span>{{scope.row.createDate | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="通话时长(秒)">
        <template slot-scope="scope">
          <span>{{scope.row.talkTime}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="录音" width="200">
        <template slot-scope="scope">
          <vue-audio-native :url=scope.row.mediaUrl :showCurrentTime=false></vue-audio-native>
        </template>
      </el-table-column>
      
    </el-table>
    <!-- footer 分页条 -->
    <template slot="footer">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.current"
        :page-sizes="[50]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin: -10px;"
      ></el-pagination>
    </template>
    
  </d2-container>
</template>

<script>
import * as record from "@/api/record";

export default {
  components: {
    
  },
  name: "table_user",
  data() {
    return {
      options: [],
      value: "",

      table: {
        columns: [],
        data: [],
        size: "mini",
        stripe: true,
        border: true
      },

      isLoading: false,

      list: null,
      total: null,
      listQuery: {
        current: 1,
        pageSize: 50
      },
      form: {
        catalogId: undefined,
        question: undefined,
        answer: undefined
      },
      rules: {},
      statusOptions: ["0", "1"],
      rolesOptions: [],
      dialogFormVisible: false,
      dialogDetailVisible: false,
      dialogDeptVisible: false,
      dialogImportExcelVisible: false,
      dialogAssignVisible: false,
      userAdd: false,
      userUpd: false,
      userDel: false,
      dialogStatus: "",
      textMap: {
        update: "编辑",
        create: "新增"
      },
      isDisabled: {
        0: false,
        1: true
      },
      tableKey: 0
    };
  },
  filters: {
    // statusFilter(status) {
    //   const statusMap = {
    //     0: "有效",
    //     1: "无效",
    //     9: "锁定"
    //   };
    //   return statusMap[status];
    // }
  },
  computed: {
    
  },
  created() {
    this.getList();
  },
  methods: {
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
    },
    handleNodeClick(data) {
      console.log(data);
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: "region1" }, { name: "region2" }]);
      }
      if (node.level > 3) return resolve([]);

      var hasChild;
      if (node.data.name === "region1") {
        hasChild = true;
      } else if (node.data.name === "region2") {
        hasChild = false;
      } else {
        hasChild = Math.random() > 0.5;
      }

      setTimeout(() => {
        var data;
        if (hasChild) {
          data = [
            {
              name: "zone" + this.count++
            },
            {
              name: "zone" + this.count++
            }
          ];
        } else {
          data = [];
        }

        resolve(data);
      }, 500);
    },

    getList() {
      record.fetchList(this.listQuery).then(response => {
        this.list = response.data.records;
        this.total = response.data.total;
        this.isLoading = false;
      });
    },

    getNodeData(data) {
      this.dialogDeptVisible = false;
      this.form.deptId = data.id;
      this.form.deptName = data.name;
      deptRoleList(data.id).then(response => {
        this.rolesOptions = response;
      });
    },
    handleDept() {
      fetchDeptTree().then(response => {
        this.treeDeptData = response;
        this.dialogDeptVisible = true;
      });
    },
    handleFilter() {
      this.listQuery.current = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getList();
    },
    handleCreate() {
      this.resetTemp();
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      // deptRoleList(this.info.deptId).then(response => {
      //   this.rolesOptions = response.data
      // })
    },
    handleAssign() {
      if (this.value == "") {
        this.$message({
          type: "error",
          message: "请选择分配对象"
        });
        return;
      }

      this.$confirm("确认分配么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {});
    },
    handleUpdate(row) {
      this.form = row;
      this.dialogFormVisible = true;
      this.dialogStatus = "update";
    },
    create(formName) {
      const set = this.$refs;

      set[formName].validate(valid => {
        if (valid) {
          addObj(this.form).then(() => {
            this.dialogFormVisible = false;
            this.getList();
            this.$notify({
              title: "成功",
              message: "创建成功",
              type: "success",
              duration: 2000
            });
          });
        } else {
          return false;
        }
      });
    },

    cancel(formName) {
      this.dialogFormVisible = false;
      this.dialogAssignVisible = false;
      this.$refs[formName].resetFields();
    },

    update(formName) {
      const set = this.$refs;
      // this.form.role = this.role
      console.log(this.form);
      set[formName].validate(valid => {
        if (valid) {
          this.dialogFormVisible = false;
          this.form.password = undefined;
          putObj(this.form).then(() => {
            this.dialogFormVisible = false;
            this.getList();
            this.$notify({
              title: "成功",
              message: "修改成功",
              type: "success",
              duration: 2000
            });
          });
        } else {
          return false;
        }
      });
    },
    deletes(row) {
      this.$confirm("确认删除么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delObj(row.id)
          .then(() => {
            this.getList();
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
              duration: 2000
            });
          })
          .cache(() => {
            this.$notify({
              title: "失败",
              message: "删除失败",
              type: "error",
              duration: 2000
            });
          });
      });
    },
    handleDetial(row) {
      this.$router.push({
        path: "/newcomer/detail",
        query: { obj: row }
      });
    },

    resetTemp() {
      this.form = {
        id: undefined,
        catalogId: undefined,
        question: undefined,
        answer: undefined
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.d2-mb {
  float: left;
  margin-right: 20px;
}
.d2-mb .el-button i {
  margin-right: 4px;
}
</style>
